<template>
  <div class="main">

    <el-form class="demo-ruleForm">
      <el-form-item>
        <el-button
          @click="handSearch"
          type="success"
          icon="el-icon-setting"
          style="float: right; margin-right: 10px"
          >考核结果系数</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="table_data"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="selection"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        align="center"
        v-for="(item, index, key) in table_columns"
        :item="item"
        :key="key"
        :index="index"
        :label="item.label"
      >
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.edit"
            size="small"
            v-model="scope.row[item.prop]"
            :placeholder="'请输入' + item.label"
          ></el-input>
          <span v-if="!scope.row.edit">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="updateItem(scope.row)"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      title="修改"
      :visible.sync="dialogVisible"
      top="20vh"
      width="40%"
      :append-to-body="true">
      <el-form
      v-if="dialogVisible"
      ref="InfoForm"
      :model="InfoForm"
      label-position="right"
      label-width="110px"
      size="medium"
      :inline="true"
      >
<!--        <el-form-item label="项目类型" prop="projectType">
          <el-input
            v-model="InfoForm.projectType"
            v-support
            placeholder="请输入项目名称"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item> -->
        <el-form-item label="及时率(%)" prop="timeRate">
          <el-input
            v-model="InfoForm.timeRate"

            placeholder="请输入及时率"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item> <el-form-item label="缺陷率(%)" prop="defectRate">
          <el-input
            v-model="InfoForm.defectRate"

            placeholder="请输入缺陷率"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item> <el-form-item label="成本" prop="personCostRate">
          <el-input
            v-model="InfoForm.personCostRate"

            placeholder="请输入成本"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div align="center">
        <el-button type="primary" size="small" @click="saveData()">保存</el-button>
        <el-button type="primary" size="small" @click="cancel()">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="阈值配置"
      :visible.sync="thresholdVisible"
      width="80%"
      height="80%"
      :append-to-body="true">
    <el-table
      :data="dialog_data"
      height="80vh"
    >
      <el-table-column
        v-if="selection"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="appraisalType" label="阈值类型">
        <template slot-scope="scope">
          <span v-if="scope.row.appraisalType===0">类型a</span>
          <span v-else-if="scope.row.appraisalType===1">类型b</span>
          <span v-else="scope.row.appraisalType===2">类型c</span>
        </template>
      </el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">
        <el-select v-model="scope.row.operator">
          <el-option label="超出" :value="1"></el-option>
          <el-option label="未超出" :value="-1"></el-option>
        </el-select>
        </template>
      </el-table-column>
      <el-table-column label="阈值">
  <template slot-scope="scope">
    <el-input v-model="scope.row.threshold" clearable>
    </el-input>
  </template>
  <el-input></el-input>
</el-table-column>
      <el-table-column label="系数">
  <template slot-scope="scope">
    <el-input v-model="scope.row.coefficient" clearable>
    </el-input>
  </template>
  <el-input></el-input>
</el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="saveItem(scope.row)"
          >保存</el-button><el-button
            type="primary"
            size="mini"
            @click="delItem(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
</el-table>

    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      InfoForm:{},

      dialogVisible: false,
      thresholdVisible:false,

      multipleSelection: [], //复选框，数据

      //弹框表格信息
      dialog_columns: [
        {
          prop: "project",
          label: "项目类型",
          width: "150",
        },
        {
          prop: "operation",
          label: "操作(1/0)",
          width: "150",
        },
        {
          prop: "threshold",
          label: "阈值(%)",
          width: "150",
        },
        {
          prop: "coefficient",
          label: "系数",
          width: "150",
        },
      ],
      //表头信息
      table_columns: [
        {
          prop: "id",
          label: "序号",
        },

        {
          prop: "projectType",
          label: "项目类型",
          width: "300",
        },
        {
          prop: "timeRate",
          label: "及时率(%)",
          width: "200",
        },
        {
          prop: "defectRate",
          label: "缺陷率(%)",
          width: "200",
        },
        {
          prop: "personCostRate",
          label: "成本(%)",
          width: "200",
        },
      ],
      dialog_data: [],
      //表格数据
      table_data: [],

    };
  },

  created () {
    this.getDatalist()
  },

  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    },
    handleClick(row) {
      console.log(row);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    allSave() {
      //全部保存
    },
    insert() {
      //插入到数据库 同时查询数据（相当于刷新）
    },
    getDatalist(){
      this.$axios
        .get('http://127.0.0.1:8089/appraisal/list',{headers:{
            Authorization:localStorage.getItem('token')
          }})
        .then(res=>{
       this.table_data = res.data.data.appraisals

         /* this.$store.commit('id')*/

      }) .catch((err) => {

      });
    },
    getData(){
      this.$axios.get('http://127.0.0.1:8089/threshold/list',{headers:{
          Authorization:localStorage.getItem('token')
        }}).then(res=>{
        this.dialog_data=res.data.data.thresholds
      })
    },
    updateItem(row){
      this.InfoForm = row
      this.dialogVisible = true

       this.$store.commit('getRowId',row.id)
    },
    saveItem(row){
      this.$axios.put('http://127.0.0.1:8089/threshold/update',{
        id:row.id,
        appraisalType:row.appraisalType,
        operator:row.operator,
        threshold:row.threshold,
        coefficient:row.coefficient

      },{headers:{Authorization:localStorage.getItem('token')}})
      .then(data=>{
        console.log(data.data)
      })
    },
    delItem(row){
      this.$axios.delete('http://127.0.0.1:8089/threshold/delete/'+row.id)
      .then(data=>{
        this.$message.success('删除成功')
        this.getData()
      })
    },
    cancel() {
      this.dialogVisible = false
      this.InfoForm = {}
    },
    saveData(){
    this.$axios.post('http://127.0.0.1:8089/appraisal/update',{
      id:this.$store.state.rowId,
    timeRate:this.InfoForm.timeRate,
    defectRate:this.InfoForm.defectRate,
   personCostRate:this.InfoForm.personCostRate
  },{headers:{
        Authorization:localStorage.getItem('token')}}
    ).then(data=>{
      console.log(data.data)
  this.dialogVisible = false

})
    },
    handSearch(){
      this.thresholdVisible=true
      this.getData()
    },
    //多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("selection:", this.multipleSelection);
    },
    handleSelectionChange1(val) {
      this.multipleSelection = val;
      console.log("selection:", this.multipleSelection);
    },
    //编辑
    handleEdit(index, row) {
      console.log(index, row);
      row.edit = true;
    },
    handleEdit1(index, row) {
      console.log(index, row);
      row.edit1 = true;
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);

      this.table_data.splice(index, 1);

      this.$message({
        message: "删除成功！",
        type: "success",
      });
    },
    handleDelete1(index, row) {
      console.log(index, row);

      this.dialog_data.splice(index, 1);

      this.$message({
        message: "删除成功！",
        type: "success",
      });
    },
    //保存
    handleSave(index, row) {
      console.log(index, row);
      row.edit = false;

      delete this.table_data[index].add;

      this.$message({
        message: "保存成功！",
        type: "success",
      });
    },
    //保存
    handleSave1(index, row) {
      console.log(index, row);
      row.edit = false;

      delete this.dialog_data[index].add;

      this.$message({
        message: "保存成功！",
        type: "success",
      });
    },
    handleAdd() {
      var addDataJson = {};
      for (var key in this.new_date_json) {
        if (key === "edit") {
          delete addDataJson[key];
        } else if (key === "add") {
          delete addDataJson[key];
        } else {
          addDataJson[key] = "";
        }
      }
      addDataJson.edit = true;
      addDataJson.add = true;
      this.table_data.push(addDataJson);
    },
    //初始化编辑属性
    initEditAttribute() {
      var self = this;
      var edit = self.edit;

     /* var dataArray = [
        {
          projectType: "研发实际类(有项目支撑",
          timeLiness: 80,
          defectRate: 80,
          costRate: 2,
        },
        {
          projectType: "研发实际类(有项目支撑",
          timeLiness: 80,
          defectRate: 80,
          costRate: 2,
        },
        {
          projectType: "研发实际类(有项目支撑",
          timeLiness: 80,
          defectRate: 80,
          costRate: 2,
        },
        {
          projectType: "研发实际类(有项目支撑",
          timeLiness: 80,
          defectRate: 80,
          costRate: 2,
        },
        {
          projectType: "研发实际类(有项目支撑",
          timeLiness: 80,
          defectRate: 80,
          costRate: 2,
        },
        {
          projectType: "研发实际类(有项目支撑",
          timeLiness: 80,
          defectRate: 80,
          costRate: 2,
        },
        {
          projectType: "研发实际类(有项目支撑",
          timeLiness: 80,
          defectRate: 80,
          costRate: 2,
        },
        {
          projectType: "研发实际类(有项目支撑",
          timeLiness: 80,
          defectRate: 80,
          costRate: 2,
        },
        {
          projectType: "研发实际类(有项目支撑",
          timeLiness: 80,
          defectRate: 80,
          costRate: 2,
        },
        {
          projectType: "研发实际类(有项目支撑",
          timeLiness: 80,
          defectRate: 80,
          costRate: 2,
        },
        {
          projectType: "研发实际类(有项目支撑",
          timeLiness: 80,
          defectRate: 80,
          costRate: 2,
        },
        {
          projectType: "研发实际类(有项目支撑",
          timeLiness: 80,
          defectRate: 80,
          costRate: 2,
        },
      ];*/

      if (dataArray.length > 0) {
        //添加编辑事件
        for (var index in dataArray) {
          dataArray[index]["edit"] = false;
          this.table_data.push(dataArray[index]);
        }

        if (Object.keys(this.new_date_json).length === 0) {
          //新增时，初始化数据结构
          this.initAddDataJson(dataArray[0]);
        }
      }
      console.log("this.tableData:", this.table_data);
    },
    initAddDataJson(dataArray) {
      //新增时，初始化数据结构
      var dataJson = dataArray;
      var newDateJson = {};
      for (var key in dataJson) {
        if (key === "edit") {
          newDateJson[key] = "true";
        } else {
          newDateJson[key] = "";
        }
      }
      newDateJson["add"] = true;
      this.new_date_json = newDateJson;
    },
    handleAdd1() {
      var addDataJson1 = {};
      for (var key in this.new_date_json) {
        if (key === "edit") {
          delete addDataJson1[key];
        } else if (key === "add") {
          delete addDataJson1[key];
        } else {
          addDataJson1[key] = "";
        }
      }
      addDataJson1.edit = true;
      addDataJson1.add = true;
      this.dialog_data.push(addDataJson1);
    },
    initEditAttribute1() {
      var self = this;
      var edit = self.edit;

   /*   var dialog_data = [
        {
          project: "新项目",
          peration: "1",
          threshold: 10,
          coefficient: 10,
        },
        {
          project: "新项目",
          peration: "1",
          threshold: 10,
          coefficient: 10,
        },
        {
          project: "新项目",
          peration: "1",
          threshold: 10,
          coefficient: 10,
        },
      ];*/

      if (dialog_data.length > 0) {
        //添加编辑事件
        for (var index in dialog_data) {
          dialog_data[index]["edit"] = false;
          this.dialog_data.push(dialog_data[index]);
        }

        if (Object.keys(this.new_date_json).length === 0) {
          //新增时，初始化数据结构
          this.initAddDataJson1(dialog_data[0]);
        }
      }
      console.log("this.dialogArray:", this.dialog_data);
    },
    initAddDataJson1(dialogArray) {
      //新增时，初始化数据结构
      var dataJson = dialogArray;
      var newDateJson1 = {};
      for (var key in dataJson) {
        if (key === "edit") {
          newDateJson1[key] = "true";
        } else {
          newDateJson1[key] = "";
        }
      }
      newDateJson1["add"] = true;
      this.new_date_json = newDateJson1;
    },
  },
};
</script>
<style scoped>
.page-container {
  float: right;
  padding: 0 16px 16px;
}
.main{
  height: 100%;
}
</style>

